import { useContext } from "react";
import { ReducerContext } from "../reducer/ReducerProvider";
import getAnchor from "../utils/getAnchor";

export interface point {
  nodeIndex: number;
  anchorPotion: "top" | "left" | "right" | "bottom";
}

export interface LineProp {
  from: point;
  to: point;
}

export default function SVGLine(props: LineProp) {
  const { from, to } = props;
  const fromIndex = from.nodeIndex;
  const toIndex = to.nodeIndex;
  const { state } = useContext(ReducerContext);
  if (state.data[fromIndex] && state.data[toIndex]) {
    const startPoint = getAnchor(
      state.data[fromIndex].x,
      state.data[fromIndex].y,
      "100",
      "100"
    )[from.anchorPotion];
    const endPoint = getAnchor(
      state.data[toIndex].x,
      state.data[toIndex].y,
      "100",
      "100"
    )[to.anchorPotion];
    return (
      <line
        x1={startPoint.cx}
        y1={startPoint.cy}
        x2={endPoint.cx}
        y2={endPoint.cy}
        style={{ stroke: "rgb(0,0,0)" }}
      />
    );
  } else {
    return <></>;
  }
}
